Responsive Web Design - The Viewport

பார்வைத்தொகுதியை அமைத்தல்

பார்வைத்தொகுதி என்பது ஒரு வலைப்பக்கத்தின் பயனருக்கு தெரியும் பகுதியாகும்.

பார்வைத்தொகுதி சாதனத்துடன் மாறுபடும் (கணினித் திரையை விட மொபைல் தொலைபேசியில் மிகவும் சிறியதாக இருக்கும்).

உங்கள் அனைத்து வலைப் பக்கங்களின் <head> பிரிவில் பின்வரும் <meta> உறுப்பைச் சேர்க்க வேண்டும்:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

இது பக்கத்தின் பரிமாணங்கள் மற்றும் அளவிடலைக் கட்டுப்படுத்த உலாவிக்கு வழிமுறைகளை அளிக்கிறது.

width=device-width பகுதி பக்கத்தின் அகலத்தை சாதனத்தின் திரை-அகலத்தைப் பின்பற்ற அமைக்கிறது (இது சாதனத்தைப் பொறுத்து மாறுபடும்).

initial-scale=1.0 பகுதி பக்கம் முதலில் உலாவியால் ஏற்றப்படும் போது ஆரம்ப அளவு நிலையை அமைக்கிறது.

பார்வைத்தொகுதி ஒப்பீடு

பார்வைத்தொகுதி meta குறிச்சொல் இல்லாத ஒரு வலைப்பக்கத்தின் எடுத்துக்காட்டு மற்றும் பார்வைத்தொகுதி meta குறிச்சொல்லுடன் கூடிய அதே வலைப்பக்கம்:

பார்வைத்தொகுதி meta குறிச்சொல் இல்லாமல்

Without the viewport meta tag

பார்வைத்தொகுதி meta குறிச்சொல்லுடன்

With the viewport meta tag

💡 உதவிக்குறிப்பு:

நீங்கள் இந்தப் பக்கத்தை தொலைபேசி அல்லது டேப்லெட்டுடன் உலாவிக் கொண்டிருந்தால், வித்தியாசத்தைப் பார்க்க மேலே உள்ள இரண்டு இணைப்புகளையும் கிளிக் செய்யலாம்.

பார்வைத்தொகுதிக்கு உள்ளடக்க அளவு

பயனர்கள் டெஸ்க்டாப் மற்றும் மொபைல் சாதனங்கள் இரண்டிலும் வலைத்தளங்களை செங்குத்தாக ஸ்க்ரோல் செய்வதில் பழக்கமானவர்கள் - ஆனால் கிடைமட்டமாக அல்ல!

எனவே, முழு வலைப்பக்கத்தையும் பார்க்க பயனர் கிடைமட்டமாக ஸ்க்ரோல் செய்ய அல்லது வெளியே அளவிட கட்டாயப்படுத்தப்பட்டால், அது மோசமான பயனர் அனுபவத்தை விளைவிக்கும்.

பின்பற்ற வேண்டிய சில கூடுதல் விதிகள்:

1️⃣ பெரிய நிலையான-அகல உறுப்புகளைப் பயன்படுத்த வேண்டாம்

எடுத்துக்காட்டாக, ஒரு படத்தின் அகலம் பார்வைத்தொகுதியை விட அகலமாக இருந்தால், அது பார்வைத்தொகுதியை கிடைமட்டமாக ஸ்க்ரோல் செய்யக் காரணமாகிறது. இந்த உள்ளடக்கத்தை பார்வைத்தொகுதியின் அகலத்திற்குள் பொருந்தும் வகையில் சரிசெய்வதை நினைவில் கொள்ளுங்கள்.

2️⃣ உள்ளடக்கம் ஒரு குறிப்பிட்ட அகலத்தை நம்பி நன்றாக வழங்க வேண்டாம்

திரை பரிமாணங்கள் சாதனங்களுக்கு இடையே பெரிதும் வேறுபடுவதால், உள்ளடக்கம் ஒரு குறிப்பிட்ட பார்வைத்தொகுதி அகலத்தை நம்பி நன்றாக வழங்கக்கூடாது.

3️⃣ சிறிய மற்றும் பெரிய திரைகளுக்கு வெவ்வேறு ஸ்டைலிங் பயன்படுத்த CSS மீடியாகுவரிகளைப் பயன்படுத்தவும்

பக்க உறுப்புகளுக்கு பெரிய முழுமையான CSS அகலங்களை அமைத்தால், சிறிய சாதனங்களுக்கு உறுப்புகள் மிகவும் அகலமாக இருக்கும். மாறாக, width: 100% போன்ற தொடர்புடைய அகல மதிப்புகளைப் பயன்படுத்துவதைக் கவனியுங்கள். மேலும், பெரிய முழுமையான நிலைப்படுத்தல் மதிப்புகளைப் பயன்படுத்துவதில் கவனமாக இருங்கள். இது சிறிய சாதனங்களில் உறுப்பு பார்வைத்தொகுதிக்கு வெளியே விழ காரணமாகலாம்.

பார்வைத்தொகுதி பயிற்சி

பார்வைத்தொகுதி பற்றிய உங்கள் அறிவை இந்தப் பயிற்சி சோதிக்கும்:

❓ வலை வடிவமைப்பில் பார்வைத்தொகுதி எதைக் குறிக்கிறது?

ஒரு வலைப்பக்கத்தின் கன்சோல் பகுதி

✗ தவறு! கன்சோல் பகுதி வலை மேம்பாட்டாளர்களுக்கானது

பயனரின் சாதனத்தில் ஒரு வலைப்பக்கத்தின் தெரியும் பகுதி

✓ சரி! பார்வைத்தொகுதி என்பது பயனரின் சாதனத்தில் ஒரு வலைப்பக்கத்தின் தெரியும் பகுதியாகும், இது சாதனத்தின் திரை அளவைப் பொறுத்து மாறுபடும்

பயனரின் திரையின் தீர்மானம்

✗ தவறு! திரை தீர்மானம் திரையில் உள்ள பிக்சல்களின் எண்ணிக்கை, பார்வைத்தொகுதி அல்ல

உலாவி கேச் மூலம் ஏற்றப்பட்ட பக்கத்தின் பகுதி

✗ தவறு! உலாவி கேச் என்பது தரவு சேமிப்பு அமைப்பு, பார்வைத்தொகுதி அல்ல